---
title: Özel BağlanDüğmesi
description: Özel bir BağlanDüğmesi oluşturma
---

# Özel BağlanDüğmesi

## Özel bir BağlanDüğmesi oluşturma

Kendi özel bağlantı düğmenizi oluşturmak için düşük seviyeli `ConnectButton.Custom` kullanabilirsiniz. Bu bileşen, yerleşik düğmeleri yeniden uygulamanız için gereken her şeyi içeren bir fonksiyon sunar.

Yerleşik düğmelerin minimal bir yeniden uygulaması şöyle görünebilir:

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return (
    <ConnectButton.Custom>
      {({
        account,
        chain,
        openAccountModal,
        openChainModal,
        openConnectModal,
        authenticationStatus,
        mounted,
      }) => {
        // Note: If your app doesn't use authentication, you
        // can remove all 'authenticationStatus' checks
        const ready = mounted && authenticationStatus !== 'loading';
        const connected =
          ready &&
          account &&
          chain &&
          (!authenticationStatus ||
            authenticationStatus === 'authenticated');

        return (
          <div
            {...(!ready && {
              'aria-hidden': true,
              'style': {
                opacity: 0,
                pointerEvents: 'none',
                userSelect: 'none',
              },
            })}
          >
            {(() => {
              if (!connected) {
                return (
                  <button onClick={openConnectModal} type="button">
                    Connect Wallet
                  </button>
                );
              }

              if (chain.unsupported) {
                return (
                  <button onClick={openChainModal} type="button">
                    Wrong network
                  </button>
                );
              }

              return (
                <div style={{ display: 'flex', gap: 12 }}>
                  <button
                    onClick={openChainModal}
                    style={{ display: 'flex', alignItems: 'center' }}
                    type="button"
                  >
                    {chain.hasIcon && (
                      <div
                        style={{
                          background: chain.iconBackground,
                          width: 12,
                          height: 12,
                          borderRadius: 999,
                          overflow: 'hidden',
                          marginRight: 4,
                        }}
                      >
                        {chain.iconUrl && (
                          <img
                            alt={chain.name ?? 'Chain icon'}
                            src={chain.iconUrl}
                            style={{ width: 12, height: 12 }}
                          />
                        )}
                      </div>
                    )}
                    {chain.name}
                  </button>

                  <button onClick={openAccountModal} type="button">
                    {account.displayName}
                    {account.displayBalance
                      ? ` (${account.displayBalance})`
                      : ''}
                  </button>
                </div>
              );
            })()}
          </div>
        );
      }}
    </ConnectButton.Custom>
  );
};
```

Aşağıdaki props, render fonksiyonunuza iletilir.

### Hesap özellikleri

<PropsTable
  data={[
    {
      name: 'hesap',
      required: false,
      type: 'object | tanımsız',
      description:
        'Aşağıda açıklanan mevcut hesap hakkında bilgiler içeren nesne',
    },
    {
      name: 'hesap.adres',
      required: false,
      type: 'string',
      description: (
        <>
          Tam hesap adresi, örn.
          "0x7a3d05c70581bD345fe117c06e45f9669205384f"
        </>
      ),
    },
    {
      name: 'hesap.bakiyeOndalik',
      required: false,
      type: 'string | tanımsız	',
      description: 'Hesap bakiyesi ondalıklarla',
    },
    {
      name: 'hesap.bakiyeFormatli',
      required: false,
      type: 'string | tanımsız	',
      description: (
        <>
          Bir dizi olarak formatlanmış hesap bakiyesi, örn.{' '}
          <code>1.234567890123456789</code>
        </>
      ),
    },
    {
      name: 'hesap.bakiyeSembol',
      required: false,
      type: 'string | tanımsız	',
      description: (
        <>
          Bakiyenin para birimi sembolü, örn. <code>ETH</code>
        </>
      ),
    },
    {
      name: 'hesap.gorunenBakiye',
      required: false,
      type: 'string | tanımsız	',
      description: (
        <>
          Bakiyeyi 3 anlamlı basamakta, artı sembol
          ile formatlanmış, örn. <code>1.23 ETH</code>
        </>
      ),
    },
    {
      name: 'hesap.gorunenAd',
      required: false,
      type: 'string',
      description: (
        <>
          ENS adı veya adresin kısaltılmış versiyonu, örn.{' '}
          <code>"rainbowwallet.eth"</code> veya <code>"0x7a…384f"</code>
        </>
      ),
    },
    {
      name: 'hesap.ensAvatar',
      required: false,
      type: 'string	| tanımsız',
      description: 'ENS avatar URI',
    },
    {
      name: 'hesap.ensAdı',
      required: false,
      type: 'string	| tanımsız',
      description: (
        <>
          ENS adı, örn. <code>rainbowwallet.eth</code>
        </>
      ),
    },
    {
      name: 'hesap.bekleyenIslemler',
      required: false,
      type: 'boolean',
      description:
        'Hesabın mevcut zincirde bekleyen işlemleri olup olmadığını gösteren boolean',
    },
  ]}
/>

### Zincir özellikleri

<PropsTable
  data={[
    {
      name: 'zincir',
      required: false,
      type: 'object | tanımsız',
      description:
        'Aşağıda açıklanan mevcut zincir hakkında bilgiler içeren nesne',
    },
    {
      name: 'zincir.simgeVarmi',
      required: false,
      type: 'boolean',
      description: 'Zincirin belirlenmiş bir ikonu olup olmadığını gösterir',
    },
    {
      name: 'zincir.simgeUrl',
      required: false,
      type: 'string | tanımsız',
      description:
        'Zincir simge URL\'si (Base64 veri URL\'leri indirirken tanımsız olabilir)',
    },
    {
      name: 'zincir.simgeArkaPlan',
      required: false,
      type: 'string | tanımsız',
      description:
        'Resimler yüklenirken görünen zincir simge arka planı',
    },
    {
      name: 'zincir.id',
      required: false,
      type: 'number',
      description: (
        <>
          Zincir Kimliği, örn. <code>1</code>
        </>
      ),
    },
    {
      name: 'zincir.adı',
      required: false,
      type: 'string | tanımsız',
      description: (
        <>
          Zincir adı, örn. <code>"Ethereum"</code>
        </>
      ),
    },
    {
      name: 'zincir.desteklenmeyen',
      required: false,
      type: 'boolean | tanımsız',
      description:
        'Mevcut zincirin desteklenip desteklenmediğini gösteren boolean',
    },
  ]}
/>

### Modal durum özellikleri

<PropsTable
  data={[
    {
      name: 'hesapModaliAc',
      required: false,
      type: '() => void',
      description: 'Hesap modali açma işlevi',
    },
    {
      name: 'zincirModaliAc',
      required: false,
      type: '() => void',
      description: 'Zincir modali açma işlevi',
    },
    {
      name: 'bağlanModaliAc',
      required: false,
      type: '() => void',
      description: 'Bağlan modali açma işlevi',
    },
    {
      name: 'hesapModaliAcik',
      required: false,
      type: 'boolean',
      description:
        'Hesap modali açık olup olmadığını gösteren boolean',
    },
    {
      name: 'zincirModaliAcik',
      required: false,
      type: 'boolean',
      description: 'Zincir modali açık olup olmadığını gösteren boolean',
    },
    {
      name: 'bağlanModaliAcik',
      required: false,
      type: 'boolean',
      description:
        'Bağlan modali açık olup olmadığını gösteren boolean',
    },
  ]}
/>

### Genel durum özellikleri

<PropsTable
  data={[
    {
      name: 'monteEdildi',
      required: false,
      type: 'boolean',
      description:
        'Bileşenin monte edilip edilmediğini gösteren boolean',
    },
    {
      name: 'kimlikDogrulamaDurumu',
      required: false,
      type: '"yükleniyor" | "kimlik doğrulanmadı" | "kimliği doğrulandı" | tanımsız',
      description:
        'Kimlik doğrulama durumu, veya kimlik doğrulama yapılandırılmadıysa tanımsız',
    },
  ]}
/>
